<template>
  <div>
    <el-table
      ref="singleTable"
      :data="cutObj.records"
      highlight-current-row
      @current-change="handleCurrentChange"
      @row-click="handleTableRow"
      style="
        width: 600px;
        height: 200px;
        border: 1px solid #dcdfe6;
        margin: 100px;
      "
    >
      <el-table-column property="userId" width="50"> </el-table-column>
      <el-table-column property="userName" label="用户名 " width="120">
      </el-table-column>
      <el-table-column property="userPwd" label="密码" width="120">
      </el-table-column>
      <el-table-column property="userRoot" label="等级"></el-table-column>
      <el-table-column property="userMsg" label="真实姓名"></el-table-column>
    </el-table>

    <div class="check">
      <div>
        <el-pagination
          background
          layout="prev, pager, next"
          :total="cutObj.pages * 10"
          @current-change="handleChange"
          @click="get()"
          style="margin-left: 100px; margin-bottom: 50px"
        >
        </el-pagination>

        <div style="margin: 20px 100px">
          <el-button @click="adduser()">添加用户</el-button>
          <el-button @click="deluser(userId)" style="margin-left:20px">删除用户</el-button>
          <br>
          <el-button @click="getuserById(userId)" style="margin-top:20px">修改用户信息</el-button>
        </div>
      </div>
      <div>
        <div>
          <fieldset style="width: 200px">
            <legend>查询用户信息</legend>
            <form action="">
                <select v-model="userRoot">
                    <option>所有用户</option>
                    <option>超级管理员</option>
                    <option>资料管理员</option>
                    <option>灾情管理员</option>
                    <option>专家管理员</option>
                    <option>库房管理员</option>
                </select>


              <input
                type="button"
                value="查询"
                @click="get()"
                style="margin: 20px"
              />
            </form>
          </fieldset>
        </div>
      </div>
    </div>

    <el-dialog
      title=""
      :visible.sync="dialogVisible"
       width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">修改用户信息</h1>
      <div class="msg" style="margin: 30px auto">
        <div style="width: 300px;margin: 30px auto">
          <p style="margin: 50px 60px;">用户名：{{ userList.userName }}</p>
          <p style="margin: 50px 60px">新密码： <input type="text" v-model="userPwd"></p>
          <p style="margin: 50px 60px">确认新密码<input type="text" v-model="userPwd1"></p>
          <p style="margin: 50px 60px">真实姓名:{{ userList.userMsg }}</p>
          <p style="margin: 50px 60px">
                    用户等级：
                <select v-model="userRoot">               
                    <option>超级管理员</option>
                    <option>资料管理员</option>
                    <option>灾情管理员</option>
                    <option>专家管理员</option>
                    <option>库房管理员</option>
                </select>

          <br>

          <input type="button" @click="update(userId)" value="修改" style="margin:50px">
          </p>
        </div>
      </div>
    </el-dialog>

    <el-dialog
      title=""
      :visible.sync="dialog"
      width="600px"
      :before-close="handleClose"
    >
      <h1 style="text-align: center">添加用户</h1>
      <div class="msg" style="display: flex">
        <div style="width: 300px;margin: 30px auto">
          <p style="margin: 50px 30px;width: 260px;">
            用户名：<input type="text" v-model="userName" />
          </p>
          <p style="margin: 50px 30px;width: 260px;">
            密码：<span> </span> <input type="text" v-model="userPwd" />
          </p>
          <p style="margin: 50px 30px;width: 260px;">
            确认密码：<input type="text" v-model="userPwd1" />
          </p>
          <p style="margin: 50px 30px;width: 260px;">
            真实姓名：<input type="text" v-model="userMsg" />
          </p>
          <p style="margin: 50px 30px">
                用户等级：
                <select v-model="userRoot">               
                    <option>超级管理员</option>
                    <option>资料管理员</option>
                    <option>灾情管理员</option>
                    <option>专家管理员</option>
                    <option>库房管理员</option>
                </select>
          </p>
        </div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="add()">添加</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { mapState, mapMutations, mapActions } from "vuex";

export default {
  data() {
    return {
      pageNo: "",
      pages: "",
      userId: "",
      userName: "",
      userPwd: "",
      userPwd1:"",
      userRoot: "",
      userMsg: "",
      userList: [],
      dialogVisible: false,
      dialog: false,
    };
  },
  computed: {
    ...mapState("user", ["cutObj", "param"]),
  },
  methods: {
    ...mapMutations("user", ["setParam"]),
    ...mapActions("user", ["findByItem"]),

    handleChange(index) {
      console.log(`当前页: ${index}`);
      this.pageNo = index;
      console.log("页码" + this.pageNo);
      this.cut(this.pageNo);
    },
    get() {

        if(this.userRoot === '所有用户'){
            this.userRoot = ""
        }
      let paramObj = this.param;
      paramObj.userRoot = this.userRoot;
      console.log(this.userRoot)
      // 把最新的信息装入 store中的 param对象中
      this.setParam(paramObj);
      this.findByItem();
    },
    cut(pageNo) {
      let paramObj = this.param;
      paramObj.pageNo = pageNo;
      this.setParam(paramObj);
      this.findByItem();
    },
    async getuserById(userId) {
      let paramobj = { userId: userId };

      let userObj = await this.ajax.getSubmit(
        "/api/user/findUserById",
        paramobj
      );

      console.log(userObj);

      this.userList = userObj;

      this.dialogVisible = true;
    },
    handleCurrentChange(val) {
      this.currentRow = val;
      console.val;
    },
    handleTableRow(row) {
      console.log(row.userId);

      this.userId = row.userId;
    },
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
    adduser() {
      this.dialog = true;
    },

    async add() {

      let userobj = {
        userName: this.userName,
        userPwd: this.userPwd,
        userRoot: this.userRoot,
        userMsg: this.userMsg,
      };

      let Obj = await this.ajax.getSubmit("/api/user/addUser", userobj);

      console.log(Obj);

      if(Obj != null){
        alert('添加成功')
      }

      this.dialog = false;

    },
    async update(userId){
        
    if(this.userPwd == this.userPwd1){
        let updateobj = { userId: userId,userPwd:this.userPwd,userRoot:this.userRoot };

        let userObj = await this.ajax.getSubmit(
        "/api/user/updateUser",
        updateobj
      );
      console.log(userObj)

      alert('修改成功')

      this.dialogVisible = false;
      this.findByItem()

    }else{

        alert('两次输入的密码不一致')

    }

    },
    async deluser(userId){
        

        let updateobj = { userId: userId};

        let userObj = await this.ajax.getSubmit(
        "/api/user/delUser",
        updateobj
      );
      console.log(userObj)

    alert('删除成功')
     this.findByItem()

    }
  },
  created() {
    this.findByItem();
  },
};
</script>

<style>
.check {
  display: flex;
}
.check > div:first-child {
  width: 450px;
  height: 200px;
}

.check > div:nth-child(2) {
  width: 300px;
  height: 200px;
}
</style>